import Icon from '@teld/q-components/Icon';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, createNameSpace } from 't/common/utils';
import { computed, defineComponent, watch, ref, nextTick } from 'vue';
import styles from './index.module.scss';
import './index.scss';
import useMark ,{sysHasMaskAuth}from 't/common/hooks/useMask';

export default defineComponent({
  name: createNameSpace('label'),
  props: {
    ...commonProps,
    icon: String,
    showIcon: Boolean,
    label: {
      type: String,
      default() {
        return '';
      },
    },
    valueType: {
      type: String,
      default() {
        return 'static';
      },
    },
    constValue: String,
    labelValue: String,
    showHint: Boolean,
    hintMode: String,
    hintMsg: String,
    enableMask: {
      type: Boolean,
      default() {
        return false
      }
    },
    readonly: {
      type: Boolean,
      default() {
        return true
      }
    }

  },
  emits: ['data-changed', 'OnMaskChanged'],
  setup(props, { attrs, emit, expose, slots }) {
    const maskValue = ref('')
    const isMasked = ref(true)
    const IsMasked = computed(() => {
      return isMasked.value
    })
    const [mappingProps, mappingExpose] = useMappingProps(props, {
      setMaskValue: (value) => {
        maskValue.value = value
      },
      rollbackMaskValue: () => {
        maskValue.value = (mappingProps.valueType === 'expression'
          ? mappingProps.labelValue
          : mappingProps.constValue)
      },
      showMask: (val) => {
        if(!sysHasMaskAuth()||!props.enableMask) return 
        isMasked.value = val
      },
      ShowMask: (val) => {
        if(!sysHasMaskAuth()||!props.enableMask) return 
        isMasked.value = val
      },
      IsMasked,
      isMasked:IsMasked
    });

    const { initMask, maskIconClick } = useMark(mappingProps, mappingProps.valueType === 'expression' ? 'labelValue' : 'constValue', isMasked)
    expose(mappingExpose);
    watch(() => [isMasked.value, mappingProps.enableMask], async () => {
      if(window.Funcs&&!Funcs.EnableMask()) return
      await nextTick()
      emit('OnMaskChanged')
    }, {
      immediate: true
    })
    watch(
      () => {
        return [mappingProps.labelValue, mappingProps.constValue];
      },
      (a, b) => {
        emit('data-changed');
      },
    );

    return () => {
      // let label =
      //   (mappingProps.valueType === 'expression'
      //     ? mappingProps.labelValue
      //     : mappingProps.constValue) ??
      //   slots?.default?.() ??
      //   mappingProps.label;
      const label = computed(() => {
        return maskValue.value || ((mappingProps.valueType === 'expression'
          ? mappingProps.labelValue
          : mappingProps.constValue) ??
          slots?.default?.() ??
          mappingProps.label)
      })
      return (

        <span
          {...attrs}
          {...mappingProps}
          class={['t-label', 'no-outline', styles.module]}
          title={
            mappingProps.showHint
              ? mappingProps.hintMode == 'custom'
                ? mappingProps.hintMsg
                : label.value
              : null
          }
          v-show={mappingProps.visible}
        >
          {mappingProps.showIcon && mappingProps.icon && (
            <Icon class={[mappingProps.icon]} name={mappingProps.icon} />
          )}

          {label.value}
          {(() => {
            if (initMask()&&sysHasMaskAuth()) {
              return <i
                class={
                  !isMasked.value
                    ? 'dx-icon fas icon-t-mask-open'
                    : 'dx-icon fas icon-t-mask-close'
                }
                onClick={maskIconClick}
              ></i>
            }
          })()}
        </span>


      );
    };
  },
});

